<template>
    <el-container>
        <el-header>
            <div class="total">
                <div class="s1">租房管理系统</div>
                <div class="s2"><el-button type="text" style="color: white" @click="logout">退出登录</el-button></div>
                <div class="blue-bar"></div>
            </div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu class="menu" default-active="activeIndex" background-color="#293C50" text-color="#FFFFFF"
                    active-text-color="#ffd04b" @select="handleSelect">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>个人中心</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">修改密码</el-menu-item>
                            <el-menu-item index="1-2">个人信息</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-setting"></i>
                        <span slot="title">用户信息</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-goods"></i>
                        <span slot="title">房源信息</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-goods"></i>
                        <span slot="title">预约申请</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="el-icon-bell"></i>
                        <span slot="title">用户反馈</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <h1>个人中心</h1>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
            activeIndex: '1',
        }
    },
    methods: {
        logout() {
            this.$router.push({ name: "login" });
        },
        handleSelect(key) {
            switch (key) {
                case '1':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "adminHome" });
                    break;
                case '2':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "userAccount" });
                    break;
                case '3':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "houseInfo" });
                    break;
                case '4':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "userAppointment" });
                    break;
                case '5':
                    if (key == this.activeIndex) {
                        break;
                    }
                    this.$router.push({ name: "userMess" });
                    break;
            }
        },

    }
}
</script>

<style scoped>
.el-header {
    position: relative;
    width: 100%;
    height: 60px;
    background-color: rgb(41, 60, 80);
    color: #FFFFFF;
    text-align: center;
    line-height: 60px;
    position: relative;
}

.el-aside {
    display: block;
    position: absolute;
    left: 0;
    top: 60px;
    bottom: 0;
}

.el-main {
    position: absolute;
    left: 200px;
    right: 0;
    top: 60px;
    bottom: 0;
    overflow-y: scroll;
}

.menu {
    height: 100%;
    padding: 0;
}

.s1 {
    float: left;
}

.s2 {
    float: right;
}

.blue-bar {
    height: 10px;
    background-color: rgb(0, 135, 244);
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

</style>